@import "./mixin";

.text-upper {
  text-transform: uppercase;
}
.text-under,
.underline {
  text-decoration: underline;
}
.lh1\.5 {
  line-height: 1.5em;
}
@for $i from 1 through 100 {
  @if $i <= 3 {
    /** start: text-ellip  文本溢出隐藏*/
    .ellip#{$i} {
      @include text-ellip($i);
    }
    /** end: text-ellip  文本溢出隐藏*/
    /** start: line-height */
    .lh#{$i} {
      line-height: #{$i};
    }
    /** end: line-height */
  }
  @if $i <= 9 {
    .fw#{$i}00 {
      font-weight: $i * 100;
    }
  }
  /** start: font-size&line-height */
  .fs#{$i} {
    font-size: #{$i}px;
  }
  /** end: font-size&line-height */
}

@each $clr in $color {
  /** start: background-color bg-000 */
  .bg-#{$clr} {
    background-color: var(--#{$clr});
    &\:important {
      background-color: var(--#{$clr}) !important;
    }
  }
  /** end: background-color bg-000 */
  /** start: 字体颜色 fc-000 */
  .fc-#{$clr} {
    color: var(--#{$clr});
  }
  .fc-#{$clr}\:placeholder {
    &::placeholder {
      color: var(--#{$clr});
    }
  }
  .fc-#{$clr}\:placeholder\:important {
    &::placeholder {
      color: var(--#{$clr}) !important;
    }
  }
  .fc-#{$clr}\:important {
    color: var(--#{$clr}) !important;
  }
  .fc-#{$clr}\:hover {
    &:hover {
      color: var(--#{$clr});
    }
  }
  /** end: 字体颜色 fc-000 */

  /** start: border */
  @for $i from 1 through 3 {
    .br#{$i}-#{$clr} {
      border: #{$i}px solid var(--#{$clr});
    }
    .br#{$i}-#{$clr}\:important {
      border: #{$i}px solid var(--#{$clr}) !important;
    }
    @each $dir in $direction {
      $value: map-get($dir, "value");
      $label: map-get($dir, "label");
      .br#{$label}#{$i}-#{$clr} {
        border-#{$value}: #{$i}px solid var(--#{$clr});
      }
    }
  }
  /** end: border */
}
